import React, {FC} from 'react';
import {OptionType, QuestionCheckboxPropsType} from "./interface";
import {Button, Checkbox, Form, Input, Select, Space} from "antd";
import {MinusCircleOutlined} from "@ant-design/icons";
import {nanoid} from "@reduxjs/toolkit";

const PropComponent: FC<QuestionCheckboxPropsType> = (props: QuestionCheckboxPropsType) => {
    const {title = '', isVertical = false, List = [], onChange, disabled} = props
    const [form] = Form.useForm()

    function handleChange() {
        if (!onChange) return
        const newValues = form.getFieldsValue() as QuestionCheckboxPropsType
        if (newValues.List) {
            newValues.List = newValues.List.filter(it => it.text !== null)
        }
        const {List = []} = newValues
        List.forEach(it => {
            if (it.value) return
            it.value = nanoid(5)
        })
        onChange(newValues)

    }

    return (
        <Form layout={'vertical'}
              initialValues={{title, isVertical, List}}
              onValuesChange={handleChange}
              disabled={disabled}
              form={form}
        >
            <Form.Item label={'标题'} name={'title'} rules={[{required: true, message: '请输入标题'}]}>
                <Input/>
            </Form.Item>
            <Form.Item label={'选项'}>
                <Form.List name='List'>
                    {
                        (fields, {add, remove}) => (
                            <>
                                {
                                    fields.map(({key, name}, index) => {
                                        return <Space key={key}>
                                            <Form.Item valuePropName={'checked'} name={[name, 'checked']}>
                                                <Checkbox/>
                                            </Form.Item>
                                            <Form.Item name={[name, 'text']}
                                                       rules={[
                                                           {required: true, message: '请输入选项文字'},
                                                           {
                                                               validator: (_, text) => {
                                                                   const {List = []} = form.getFieldsValue()
                                                                   let num = 0
                                                                   List.forEach((opt: OptionType) => {
                                                                       if (opt.text === text) {
                                                                           num++//记录text相同的次数  只为1
                                                                       }
                                                                   })
                                                                   if (num === 1) return Promise.resolve()
                                                                   return Promise.reject(new Error('和其他选项重复了'))
                                                               }
                                                           }
                                                       ]}>
                                                <Input placeholder={'请输入选项文字'}/>
                                            </Form.Item>
                                            <Form.Item>
                                                {
                                                    fields.length > 0 && (
                                                        <MinusCircleOutlined className="dynamic-delete-button"
                                                                             onClick={() => remove(name)}/>
                                                    )
                                                }
                                            </Form.Item>
                                        </Space>
                                    })
                                }
                                <Form.Item>
                                    <Button type={'link'} onClick={() => {
                                        add({text: '', value: '', checked: false})
                                    }}>添加</Button>
                                </Form.Item>
                            </>
                        )
                    }

                </Form.List>

            </Form.Item>

            <Form.Item label={'默认选择'} name={'value'}>
                <Select options={List.map(({value, text}) => ({value, label: text || ''}))}></Select>
            </Form.Item>
            <Form.Item label={'居中'} name={'isVertical'} valuePropName={'checked'}>
                <Checkbox>竖向排列</Checkbox>
            </Form.Item>
        </Form>
    );
};

export default PropComponent
